<template>
  <!-- 一级菜单 -->
  <el-sub-menu 
    v-if="menu.children && menu.children.length" 
    :index="menu.path"
    :popper-append-to-body="false"
  >
    <template #title>
      <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
      <span>{{ menu.title }}</span>
    </template>
    
    <!-- 二级菜单 -->
    <template v-for="child in menu.children" :key="child.path">
      <el-sub-menu 
        v-if="child.children && child.children.length"
        :index="child.path"
        :popper-append-to-body="false"
      >
        <template #title>
          <span>{{ child.title }}</span>
        </template>
        
        <!-- 三级菜单 -->
        <el-menu-item 
          v-for="subChild in child.children" 
          :key="subChild.path"
          :index="subChild.path"
          :route="{ path: subChild.path }"
        >
          <span>{{ subChild.title }}</span>
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item 
        v-else 
        :index="child.path"
        :route="{ path: child.path }"
      >
        <span>{{ child.title }}</span>
      </el-menu-item>
    </template>
  </el-sub-menu>
  
  <!-- 无子菜单的一级菜单项 -->
  <el-menu-item 
    v-else 
    :index="menu.path" 
    :route="{ path: menu.path }"
  >
    <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
    <span>{{ menu.title }}</span>
  </el-menu-item>
</template>

<script setup>
defineProps({
  menu: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
/* 调整菜单缩进 */
.el-sub-menu .el-menu-item {
  padding-left: 50px !important;
}

.el-sub-menu .el-sub-menu__title {
  padding-left: 20px !important;
}
</style>